<template>
  <div class="video-player-box">
    <video class="video-player" ref="video" autoplay disablePictureInPicture poster="@/assets/images/loader-thumb.jpg">
    </video>
  </div>
</template>

<script setup>
  import { ref, nextTick, onMounted } from 'vue';
  import { realTimeStream } from '@/api/auth/ledger.js';
  import { tagsStore } from '@/stores';
  const wfs = ref(null);
  const video = ref(null);
  const heartBeatTime = ref(null);
  const videoBoj = ref({});
  const queryParams = ref({
    channelNos: '',
    id: ''
  });
  onMounted(() => {
    nextTick(() => {
      // 从当前窗口的 URL 中创建一个 URL 对象
      // 获取哈希部分并去除开头的 '#'
      handlePlayVideo();
    });
  });
  const parseQuery = () => {
    const url = window.location.href;
    let params = new URLSearchParams(url.split('?')[1]);
    let channelNos = params.get('channelNos');
    let id = params.get('id');
    queryParams.value.channelNos = channelNos;
    queryParams.value.id = id;
  };

  const handlePlayVideo = () => {
    if (video.value) {
      video.value.muted = true; // 确保视频是静音的
      video.value.play();
      // parseQuery();
      handleNodeClick();
    }
  };
  function handleNodeClick() {
    const url = window.location.href;
    let row = new URLSearchParams(url.split('?')[1]);
    let channelNos = row.get('channelNos');
    let id = row.get('id');
    queryParams.value.channelNos = channelNos;
    queryParams.value.id = id;
    // alert(`url: ${url}`);
    const params = {
      channelNos: queryParams.value.channelNos,
      code: '',
      id: queryParams.value.id,
      psUrl: ''
    };
    realTimeStream(params).then((e) => {
      console.log('eeee', e.msg);
      // alert(`请求: ${e.msg}, url: ${url}, id: ${idType}, channelNosType: ${channelNosType} `);
      closeWebsocket();
      initJMuxer();
      inintSocket();
      // startListenMessage();
    });
  }

  function closeWebsocket() {
    const closeMsgConf = {
      c: queryParams.value.id,
      t: 'realVideoClose',
      v: String(queryParams.value.channelNos)
    };
    if (wfs.value) {
      wfs.value.closeWebSocket(closeMsgConf);
      wfs.value.websocketLoader.onWebsocketDataUploading({
        data: closeMsgConf
      });
      wfs.value.websocketLoader.destroy();
    }
  }
  // 初始化长链接
  function inintSocket() {
    // alert(`初始化长链接: ${String(queryParams.value.channelNos)}, id: ${queryParams.value.id}`);
    // debugger;
    // const { c, t, v } = this.openMsgConf;
    const openMsgConf = {
      c: queryParams.value.id,
      t: 'realVideoOpen',
      v: String(queryParams.value.channelNos)
    };
    // const duration = new Date(endTime).valueOf() - new Date(startTime).valueOf()
    const { protocol, host } = location;
    let wsProtocol = protocol === 'http:' ? 'ws://' : 'wss://';
    const socketURL = `${wsProtocol}${host}/voiceStreamWs/`;
    wfs.value.attachMedia(
      video.value,
      openMsgConf.c,
      'H264Raw',
      socketURL,
      openMsgConf.t,
      openMsgConf.v,
      null,
      (socket) => {
        clearInterval(heartBeatTime.value);
        // console.log(this.wfs);
        video.value.src = '';
        // this.$emit('complete');
      }
    );
    heartBeat();
  }
  function initJMuxer() {
    wfs.value = new Wfs();
    window.wfs = wfs.value;
  }
  function heartBeat() {
    // alert(`心跳: ${String(queryParams.value.channelNos)}, id: ${queryParams.value.id}`);
    const heartBeatConf = {
      c: queryParams.value.id,
      t: 'heartBeat',
      v: String(queryParams.value.channelNos)
    };
    // if (!this.wfs.websocketLoader.client) {
    //   return false;
    // }
    heartBeatTime.value = setInterval(() => {
      wfs.value.websocketLoader.onWebsocketDataUploading({
        data: JSON.stringify(heartBeatConf)
      });
    }, 5000);
  }
</script>

<style lang="scss" scoped>
  .video-player-box {
    width: 100%;
    height: 100%;
    position: relative;
    .video-player {
      width: 100%;
      height: 100%;
      position: absolute;
    }
    .q-p {
      width: 27px;
      height: 27px;
      position: absolute;
      top: 25px;
      right: 10px;
      background: url('@/assets/images/home-page/fd.png');
      background-size: 100% 100%;
      z-index: 999999;
    }
  }
</style>
